<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElTag } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oTagSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  //   type: {
  //     type: String,
  //     default: 'daterange'
  //   },
  //   defaultValue: {
  //     type: Array,
  //     default: Object as () => [Date]
  //   },
  ...IgnoreProps
}
export const oTagProps = {
  ...ElTag.props,
  ...oTagSelfProps
}
export type oTagPropsType = ExtractPropTypes<typeof oTagProps>
export type oElTagPropsType = ExtractPropTypes<typeof ElTag>
const oTag = defineComponent({
  name: 'one-tag',
  props: oTagProps,
  components: { oTagProps },
  inheritAttrs: false, // 不用穿透attrs
  setup(props: oTagPropsType, context) {
    // const inProps = omitSelfProps<oTagPropsType, typeof oTagSelfProps>(props, oTagSelfProps)
    let valueArr = [] as Array<SimpleKeyArrayObject>
    const value = props.formData![props.prop!]
    valueArr = Array.isArray(Array.isArray) ? value : [value]
    valueArr = valueArr.map(it => {
      if (typeof it != 'object') {
        return {
          text: it
        }
      }
      return it
    })
    return () =>
      valueArr.map((item: SimpleKeyArrayObject) => (
        <ElTag {...item} class={oTag.name} v-slots={context.slots}>
          {item.text}
        </ElTag>
      ))
  }
})
export default oTag
</script>
<style lang="scss" scoped></style>
